{% extends "leftmenutemplate.html" %}


{% block content %}
    <style>
        .layui-row{
            margin-top: 10px;
        }
        .table-box{
            border: 1px solid rgba(166,166,166, 0.4);
            border-radius: 10px;
            padding: 10px 10px;
        }
        .layui-table-tool{
            display: none;
        }
        .input-search{
            width: 200px;
            float: left;
            margin-right: 20px;
        }
    </style>

    <div class="layui-row" style="height: 100px">

    </div>

    <div class="layui-row table-box">
        <div>
            <input type="text" id="shop_name" placeholder="店铺搜索" autocomplete="off" class="layui-input input-search">
            <input type="text" id="sku" placeholder="店铺SKU" autocomplete="off" class="layui-input input-search">
            <input type="text" id="fnsku" placeholder="FNSKU" autocomplete="off" class="layui-input input-search">
            <button type="button" class="layui-btn  layui-btn-normal" onclick="start_search()">查询</button>
        </div>
        <script type="text/html" id="toolbar">
            <div><button type="button" id="search_btn" lay-event="search" >开始查询</button></div>
        </script>
        <table id="damaged_lost" lay-filter="damaged_lost_table"></table>
    </div>
    <script type="text/html" id="case_model">
        {% verbatim %}
            <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-normal" onclick="show_case_model({{ d.id }})">申诉详情</a>
        {% endverbatim %}
    </script>

    <script>
        layui.use(['table'], function(){
            table = layui.table;
            table.render({
                elem: '#damaged_lost',
                url: '/pages/table/damaged_lost/', //数据接口
                where: { //设定异步数据接口的额外参数
                    shop_name: '',
                    sku: '',
                    fnsku: '',
                },
                autoSort: false, // 禁用前端排序
                size: 'sm',
                limit: 20,
                toolbar: '#toolbar', //绑定工具条
                page: true, //开启分页
                cols: [[ //表头
                    {field: 'shop_name', title: '店铺名称', minWidth:180},
                    {field: 'sku', title: '店铺SKU',minWidth:150},
                    {field: 'fnsku', title: 'FNSKU', minWidth:150},
                    {field: 'inventory_misplaced', title: '误放库存', sort: true},
                    {field: 'inventory_damaged', title: '残损库存', sort: true},
                    {field: 'inventory_found', title: '已找到库存', sort: true},
                    {field: 'inventory_reimbursed_total', title: '总丢失库存', sort: true},
                    {field: 'reimbursed_cash_quantity', title: '现金赔偿', sort: true},
                    {field: 'reimbursed_inventory_quantity', title: '库存赔偿', sort: true},
                    {field: 'reimbursed_total_quantity', title: '总已赔偿', sort: true},
                    {field: 'reimbursed_need', title: '仍需赔偿', sort: true},
                    {field: 'case_id', title: 'Case ID', edit: 'text'},
                    {field: 'remark', title: '备注', minWidth:150,},
                    {field: 'id', title: '索赔详情', templet: '#case_model', minWidth:90},
                    {field: 'refresh_time', title: '更新时间', minWidth:150, sort: true},

                ]]
            });
             // 监听工具条事件
            table.on('toolbar(damaged_lost_table)', function(obj){
                var shop_name = $('#shop_name').val()|| '';
                var sku = $('#sku').val() || '';
                var fnsku = $('#fnsku').val() || '';
                 switch(obj.event){
                    case 'search':
                        table.reload('damaged_lost', {
                            where: { //设定异步数据接口的额外参数
                                shop_name: shop_name,
                                sku: sku,
                                fnsku: fnsku,
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    break;
                }
            });

            //监听单元格编辑
            table.on('edit(damaged_lost_table)', function(obj){
                console.log(obj.value);
                $.ajax({
                    url: "/pages/update_damaged_lost_caseid/",
                    {#url: "#",#}
                    type: "POST",
                    dataType: "json",
                    data: {
                        datas: JSON.stringify({"id": obj.data.id, "case_id": obj.value}),
                    },
                    //async: false,
                    success: function(result) {
                        if (result.code == '1') {
                            layer.msg('填写成功！', {
                                time: 800
                            });
                        } else {
                            layer.msg('填写失败！', {
                                icon: 2,
                                time: 2000
                            });
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert('错误信息：' + XMLHttpRequest.responseText); //获取的信息即是异常中的Message
                    }
                });
            });

            //监听排序事件
            table.on('sort(damaged_lost_table)', function(obj){
              console.log(obj.field); //当前排序的字段名
              console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
              console.log(this); //当前排序的 th 对象

              table.reload('damaged_lost', {
                initSort: obj
                ,where: {
                  order_field: obj.field //排序字段
                  ,order_way: obj.type //排序方式
                }
              });
            });
        });

        function start_search() {
            $('#search_btn').click();
        }

        function show_case_model(data_id) {
            {#展示case模板数据#}
            layer.config({
                    extend: 'myskin/style.css',
                });
            layer.open({
                    type: 2,
                    title: "case 模板",
                    offset: 'auto',
                    area: ['50%', '60%'],
                    shade: [0.8, '#393D49'],
                    shadeClose: true,
                    move: false,
                    resize : false,
                    content: "/pages/show_damaged_lost_case_mode/?data_id=" + data_id,
                    skin: 'mypop-ups',          //仅限于单个模态框的使用
                });
        }
    </script>
{% endblock content %}